import Hilo from 'hilojs';
import PiecesUi from "@/src/component/PiecesUi.js"

/**
 * 棋盘，提供了一个棋盘容器，
 * 提供棋盘初始化，放入棋子，删除棋子，标记棋子等功能，
 * 提供了一些棋子的操作事件的实现。
 */
let Chessboard = Hilo.Class.create({
	Extends: Hilo.Container,
	sourceQueue: {},
	pieces: [],
	stageWidth: 720,
	stageHeight: 1280,
	constructor: function(properties) {
		Chessboard.superclass.constructor.call(this, properties);
		this.sourceQueue = properties.sourceQueue;
		this.pieces = properties.pieces;
		this.stageWidth = properties.stageWidth;
		this.stageHeight = properties.stageHeight;
		this.init();
	},
	// 该棋盘划线部分实际的偏移量和宽高,宽高比最好做成8:9
	offsetX: 0,
	offsetY: 0,
	width: 0,
	height: 0,
	/**
	 * 获取在棋盘线为相对位置的容器绝对位置，
	 */
	getX: function(x) {
		// 实际上由于线条的宽度影响，可以在这里做一下微调。
		return x + this.offsetX;
	},
	getY: function(y) {
		// 实际上由于线条的宽度影响，可以在这里做一下微调。
		return y + this.offsetY;
	},
	/**
	 * 初始化棋盘
	 */
	init: function() {

		// 720，1280， 规定棋盘和dom边界左右留20像素间隔
		let boardWidth = this.stageWidth - 40;
		let boardHeight = boardWidth / 0.811;


		// 棋盘边缘到棋盘线的距离
		let chessboard_line_offsetx = boardWidth / 17;
		let chessboard_line_offsety = boardHeight / 19;

		// 棋盘容器中的棋盘背景图
		let chessboard_view = new Hilo.Bitmap({
			id: 'chessboard_background',
			image: this.sourceQueue.getContent("chessboard"),
			width: boardWidth,
			height: boardHeight,
			x: (this.stageWidth - boardWidth) / 2,
			y: (this.stageHeight - boardHeight) / 2
		});

		this.offsetX = chessboard_view.x + chessboard_line_offsetx;
		this.offsetY = chessboard_view.y + chessboard_line_offsety;
		this.width = boardWidth - (chessboard_line_offsetx * 2);
		this.height = boardHeight - (chessboard_line_offsety * 2);

		// 将背景添加到棋盘中
		this.addChild(chessboard_view);
	},
	/**
	 * 根据棋子坐标获取在棋盘中的实际坐标
	 * @param {Object} coo
	 */
	getUiCoo(coo) {
		// x轴位置是不用翻转的, Y轴需要做一下位置的转换
		// cooY=0表示Y的最大值，则实际uiY就是 chessboard.getY(chessboard.height) - ((cooY-1) * (chessboard.height / 9))
		return [this.getX(coo[0] * this.width / 8),
			this.getY(this.height - (coo[1] * this.height / 9))
		];
	},
	/**
	 * 刷新棋盘
	 */
	refresh: function() {
		// 进来直接清理空棋盘的所有元素，然后重新渲染
		this.removeAllChildren();
		this.init();

		// 渲染棋子
		this.pieces.forEach((item, index) => {
			let uiCoo = this.getUiCoo(item.coo);
			let pieceUi = new PiecesUi({
				piece: item,
				sourceQueue: this.sourceQueue,
				uiCoo: uiCoo,
				id: item.code,
				// 棋子大小
				pieceSize: 75
			});

			this.addChild(pieceUi);
		});
	},
	/**
	 * 标记棋盘上的位置,位置为棋盘的格子位置
	 * @param {Object} x
	 * @param {Object} y
	 */
	markPosition(x, y) {
		let uiCoo = this.getUiCoo([x, y]);
		var bmp = new Hilo.Bitmap({
			id: "select_position",
			image: this.sourceQueue.getContent("point"),
			width: this.pieceSize,
			height: this.pieceSize,
			x: uiCoo[0],
			y: uiCoo[1]
		});
		this.addChild(bmp);
	},
	/**
	 * 根据棋子code获取棋子的ui对象
	 * @param {Object} code
	 */
	getPieceUIByCode(code) {
		return this.getChildById(code);
	},
	/**
	 * 清理棋盘的标记
	 */
	clearMark() {
		// 反向找到棋子，然后执行棋子的 cancelSelected 方法
		this.pieces.forEach(pie => {
			this.getPieceUIByCode(pie.code).cancelSelected();
		})
		this.removeChildById("select_position");
		this.clearWayPoint();
	},
	markWayPoint(points, clickEvent) {
		// clickEvent 为路径标记的点击事件 points 要标记的点
		// 标记路径标记
		let container = new Hilo.Container({
			id: "way_position",
			coos: points,
			sourceQueue: this.sourceQueue,
			depth: 100
		});
		this.addChild(container);
		let Point = Hilo.Class.create({
			Extends: Hilo.Bitmap,
			constructor: function(properties) {
				Point.superclass.constructor.call(this, {
					image: properties.image,
					// rect: [0, 0, this.pieceSize, this.pieceSize],
					// 不知为何这里需要做一点偏移才能位置正确
					x: properties.x,
					y: properties.y,
					width: 30,
					width: 30,
					pivotY: properties.offset,
					pivotX: properties.offset
				});
			}
		});
		points.forEach((p, index) => {
			let uiCoo = this.getUiCoo(p);
			let newPoint = new Point({
				image: this.sourceQueue.getContent("waypoint"),
				offset: 10,
				offset: 10,
				x: uiCoo[0] + 13,
				y: uiCoo[1] + 12
			});
			newPoint.on(Hilo.event.POINTER_START, function(e) {
				clickEvent(e.eventTarget);
			});
			container.addChild(newPoint);
		});
	},
	clearWayPoint() {
		// 清除路径标记
		this.removeChildById("way_position");
	}
});

export default Chessboard;
